<template>
  <div>
    <div class="content" v-for="item in data" :key="item._id">
      <el-card style="width: 800px; text-align: center">
        <template #header>
          <h3>{{item.title}}</h3>
          <div class="tips">
            <span style="color: #00A7E0;"> <i-ep-Calendar /> <span style="position: relative;bottom: 3px;">{{$moment(item.time).format('YYYY-MM-DD HH:mm:ss')}}</span></span>
            <span style="color: #F26202; margin-left:25px;">
              <i-ep-EditPen /> 
              <span style="position: relative;bottom: 3px;">字符数：{{item.stringcount || '1000'}}</span>
              <span style="position: relative;bottom: 3px;margin-left:25px;">阅读时间≈ 5 分钟</span>
            </span>
          </div>
        </template>
        <div class="body">
          <img :src="item.pic || defaulturl" style="width: 100%" />
        </div>
        <div class="footer">
          <el-button type="primary" @click="gotodetail(item._id)">开始阅读</el-button>
          <div style="text-align: left;">
            <a class="tag" :class="item.type == '随便写写' ? 'study' : item.type == '技术杂烩' ? 'technology' : ''">{{item.type || '学习笔记'}}</a>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"

const router = useRouter()
const route = useRoute()
const props = defineProps({
  data:{
    type: Array,
    default: []
  }
})
const defaulturl = 'https://free-img.400040.xyz/4/2024/06/24/66794c3bcb54b.jpg'
const gotodetail =(id) =>{
  console.log(id)
  router.push({path:'/blog', query:{id}})
}
</script>

<style lang="less" scoped>
.content{
  margin-bottom: 25px;
  .footer{
    margin-top: 20px;
  }
  .tips{
    margin-top: 25px;
  }
  .study{
    background-color: #ff9854 !important;
    border-color: #ff9854 !important;
  }
  .technology{
    background-color: #16AB39 !important;
    border-color: #16AB39 !important
  }
  .tag{
    position: relative;
    background-color: #6435c9 ;
    border-color: #6435c9 ;
    color: #fff;
    padding: 2px 8px;
    &::before{
    position: absolute;
    transform: translateY(-50%) translateX(50%) rotate(-45deg);
    top: 50%;
    right: 100%;
    content: '';
    background-color: inherit;
    background-image: none;
    width: 17px;
    height: 17px;
    transition: none;
    }
    &::after{
    position: absolute;
    content: '';
    top: 50%;
    left: -.25em;
    margin-top: -.25em;
    background-color: #fff !important;
    width: .5em;
    height: .5em;
    -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, .3);
    border-radius: 500rem;
    }
  }
}
</style>
